<template>
	<view>
		<view class="uni-list">
			<block v-for="(value, index) in dataList" :key="index">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
					<view class="uni-media-list">
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">title</view>
							<view class="uni-media-list-text-bottom">
								<text>{{ value.stockName }}</text>
								<text>{{ value.stockCode }}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
	</view>
</template>
<script>
	import {
		listMyHolding
	} from '@/api/eye/myAttention'
	import {
		tansParams
	} from '@/utils/common'
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 12,
				groupId: '',
				title: '下拉刷新 + 加载更多',
				dataList: [],
				hasData: true,
				loadMoreText: "加载中...",
				showLoadMore: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
			}
		},
		onLoad(options) {
			console.log('页面传递参数,分组ID:' + options.id)
			this.groupId = options.id
			this.initData();
		},
		onUnload() {
			this.dataList = [];
			this.loadMoreText = "加载更多";
			this.showLoadMore = false;
		},
		onReachBottom() {
			console.log("onReachBottom");

			if (this.hasData) {
				console.log('请求数据')
				listMyHolding({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					groupId: this.groupId
				}).then((res) => {
					console.log(res)
					let count = this.dataList.length + res.rows.length
					console.log('再次请求数据条数:' + res.rows.length)
					console.log('总共请求数据条数:' + count)
					this.dataList = this.dataList.concat(res.rows);

					if (count >= res.total) {
						console.log('下拉请求到底了!')
						this.hasData = false;
						uni.showToast({
							title: '到底了!',
							duration: 2000
						});
						this.showLoadMore = true;
						this.loadMoreText = "没有更多数据了!"
						uni.stopPullDownRefresh();
					} else {
						console.log('下拉继续请求数据!')
						this.pageNum++;
						this.showLoadMore = true;
					}
				})
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			uni.showToast({
				title: '请求数据!',
				duration: 2000
			});

			this.initData();
		},
		methods: {
			goDetail: function(e) {
				let detail = {
					id: e.id,
					stockName: e.stockName,
					stockCode: e.stockCode
				};
				uni.navigateTo({
					url: './detail?' + tansParams(detail)
				});
			},
			initData() {
				listMyHolding({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					groupId: this.groupId
				}).then((res) => {
					console.log('第一次获取数据')
					this.dataList = res.rows
					if (res.total <= this.pageSize) {
						this.hasData = false;
						this.showLoadMore = true;
						this.loadMoreText = "没有更多数据了!"
						uni.stopPullDownRefresh();
						return;
					} else {
						this.pageNum++;
					}
				})
			}
		}
	}
</script>

<style>
	.text {
		background-color: #eeecec !important;
		margin: 16rpx 0;
		width: 100%;
		background-color: #fff;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #555;
		border-radius: 8rpx;
	}

	.banner {
		height: 360rpx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		max-height: 84rpx;
		overflow: hidden;
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
		width: 90%;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 42rpx;
		color: white;
		z-index: 11;
	}

	.uni-media-list-logo {
		width: 180rpx;
		height: 140rpx;
	}

	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
	}

	.uni-media-list-text-top {
		height: 74rpx;
		font-size: 28rpx;
		overflow: hidden;
	}

	.uni-media-list-text-bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>
